<template>
  <div class="p-6 space-y-6" :class="themeState.isLight ? 'text-gray-900' : 'text-white'">
    <!-- 根据用户类型显示专门的Dashboard -->
    <template v-if="currentUser.type === USER_TYPES.BRAZIL_MANAGER">
      <BrazilManagerDashboard />
    </template>
    <template v-else-if="currentUser.type === USER_TYPES.OXFORD_PHD">
      <OxfordPhDDashboard />
    </template>
    <template v-else-if="currentUser.type === USER_TYPES.ECOMMERCE_PARK">
      <EcommerceParkDashboard />
    </template>
    <template v-else-if="currentUser.type === USER_TYPES.MINING_COMPANY">
      <MiningCompanyDashboard />
    </template>

    <!-- 显示新的四板块Dashboard -->
    <template v-else>
      

      <!-- 实时通知栏 -->
      <div class="glass-card p-4 mb-6 border-l-4 border-electric-500">
        <div class="flex items-center justify-between">
          <div class="flex items-center space-x-3">
            <div class="relative">
              <Bell class="w-5 h-5 text-electric-500" />
              <div class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full animate-pulse"></div>
            </div>
            <div>
              <h4 class="font-medium" :class="themeState.isLight ? 'text-gray-900' : 'text-white'">{{ ts('实时政策通知', '实时政策通知') }}</h4>
              <p class="text-electric-500 text-sm">{{ ts('今日新增 12 条政策更新', '今日新增 12 条政策更新') }}</p>
            </div>
          </div>
          <div class="flex items-center space-x-2">
            <div class="text-xs px-2 py-1 bg-green-500/20 text-green-400 rounded animate-pulse">
              {{ ts('实时监控', '实时监控') }}
            </div>
            <button 
              @click="showNotificationDetails = !showNotificationDetails"
              class="text-electric-500 hover:text-electric-400 transition-colors"
            >
              <ChevronDown :class="showNotificationDetails ? 'rotate-180' : ''" class="w-4 h-4 transition-transform" />
            </button>
          </div>
        </div>
        
        <!-- 通知详情展开 -->
        <div v-if="showNotificationDetails" class="mt-4 pt-4 border-t border-white/10">
          <div class="space-y-3">
            <div 
              v-for="notification in recentNotifications" 
              :key="notification.id"
              class="p-3 bg-white/5 rounded-lg border-l-4"
              :class="notification.priority === 'high' ? 'border-red-500' : 
                      notification.priority === 'medium' ? 'border-yellow-500' : 'border-green-500'"
            >
              <div class="flex items-start justify-between mb-2">
                                  <div class="flex items-center space-x-3">
                    <component :is="notification.icon" class="w-4 h-4 text-electric-500" />
                    <div>
                      <div class="text-sm font-medium" :class="themeState.isLight ? 'text-gray-900' : 'text-white'">{{ ts(notification.title, notification.title) }}</div>
                      <div class="text-xs mt-1" :class="themeState.isLight ? 'text-gray-500' : 'text-gray-400'">{{ notification.time }}</div>
                    </div>
                  </div>
                <div class="flex items-center space-x-2">
                  <span :class="[
                    'text-xs px-2 py-1 rounded-full',
                    notification.priority === 'high' ? 'bg-red-500/20 text-red-400' :
                    notification.priority === 'medium' ? 'bg-yellow-500/20 text-yellow-400' :
                    'bg-green-500/20 text-green-400'
                  ]">
                    {{ notification.priority === 'high' ? '高优先级' : 
                       notification.priority === 'medium' ? '中优先级' : '低优先级' }}
                  </span>
                </div>
              </div>
              <p class="text-xs leading-relaxed" :class="themeState.isLight ? 'text-gray-600' : 'text-gray-300'">{{ notification.description }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 页面标题 -->
      <div class="text-center mb-8">
        <h1 class="text-4xl font-bold mb-2 animate-glow" :class="themeState.isLight ? 'text-gray-900' : 'text-white'">{{ getDashboardTitle() }}</h1>
        <p :class="themeState.isLight ? 'text-blue-600' : 'text-electric-500'">{{ getDashboardSubtitle() }}</p>
        
        <!-- 用户信息显示 -->
        <div v-if="currentUser.isLoggedIn" class="mt-4 flex items-center justify-center space-x-4">
          <div class="flex items-center space-x-2 rounded-lg px-4 py-2" :class="themeState.isLight ? 'bg-gray-100' : 'bg-white/10'">
            <component :is="getUserIcon()" class="w-5 h-5" :class="themeState.isLight ? 'text-blue-600' : 'text-electric-500'" />
            <span :class="themeState.isLight ? 'text-gray-900' : 'text-white'">{{ currentUser.name }}</span>
            <span class="text-sm" :class="themeState.isLight ? 'text-blue-600' : 'text-electric-500'">{{ getUserTypeConfig().name }}</span>
          </div>
          <UserTypeSwitcher v-if="showUserSwitcher" />
          <button 
            @click="showUserSwitcher = !showUserSwitcher"
            class="px-3 py-2 rounded-lg transition-colors text-sm"
            :class="themeState.isLight ? 'bg-blue-100 text-blue-700 hover:bg-blue-200' : 'bg-electric-500/20 text-electric-500 hover:bg-electric-500/30'"
          >
            {{ showUserSwitcher ? ts('隐藏切换器', '隐藏切换器') : ts('切换用户', '切换用户') }}
          </button>
        </div>
      </div>
      <!-- === 数据总览面板 === -->
    <div class="glass-card p-6 mb-8 rounded-xl overflow-hidden">
      <h2 class="text-2xl font-bold mb-6 flex items-center" :class="themeState.isLight ? 'text-gray-900' : 'text-white'">
        <BarChart2 class="w-5 h-5 mr-2 text-electric-500" />
        {{ ts('政策数据总览', '政策数据总览') }}
      </h2>
      
      <!-- 核心指标（突出政策总数和今日更新） -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4 mb-8">
        <!-- 政策总数（重点突出） -->
        <div class="text-center p-4 rounded-xl border-2 border-electric-500/50 relative overflow-hidden shadow-md transition-transform duration-300 hover:scale-105" 
             :class="themeState.isLight ? 'bg-blue-50' : 'bg-gradient-to-br from-blue-900/30 to-blue-800/20'">
          <div class="absolute -top-4 -right-4 w-16 h-16 bg-electric-500/10 rounded-full"></div>
          <div class="text-4xl font-bold text-electric-500">{{ dataOverview.totalPolicies }}</div>
          <div class="text-sm mt-1 font-medium" :class="themeState.isLight ? 'text-gray-600' : 'text-gray-300'">{{ ts('政策总数', '政策总数') }}</div>
          <div class="absolute bottom-2 right-2">
            <TrendingUp class="w-5 h-5 text-electric-500" />
          </div>
        </div>
        
        <!-- 今日更新政策数（重点突出） -->
        <div class="text-center p-4 rounded-xl border-2 border-green-500/50 relative overflow-hidden shadow-md transition-transform duration-300 hover:scale-105" 
             :class="themeState.isLight ? 'bg-green-50' : 'bg-gradient-to-br from-green-900/30 to-green-800/20'">
          <div class="absolute -top-4 -right-4 w-16 h-16 bg-green-500/10 rounded-full"></div>
          <div class="text-4xl font-bold text-green-500">{{ dataOverview.todayUpdates }}</div>
          <div class="text-sm mt-1 font-medium" :class="themeState.isLight ? 'text-gray-600' : 'text-gray-300'">{{ ts('今日更新', '今日更新') }}</div>
          <div class="absolute bottom-2 right-2">
            <RefreshCw class="w-5 h-5 text-green-500" />
          </div>
        </div>
        
        <!-- 跨境政策数 -->
        <div class="text-center p-4 rounded-xl border border-purple-500/30 shadow-md transition-colors duration-300 hover:border-purple-500" 
             :class="themeState.isLight ? 'bg-purple-50' : 'bg-gradient-to-br from-purple-900/30 to-purple-800/20'">
          <div class="text-2xl font-bold text-purple-500">{{ dataOverview.crossBorderPolicies }}</div>
          <div class="text-sm mt-1" :class="themeState.isLight ? 'text-gray-600' : 'text-gray-300'">{{ ts('跨境政策', '跨境政策') }}</div>
        </div>
        
        <!-- 覆盖国家(地区)数 -->
        <div class="text-center p-4 rounded-xl border border-orange-500/30 shadow-md transition-colors duration-300 hover:border-orange-500" 
             :class="themeState.isLight ? 'bg-orange-50' : 'bg-gradient-to-br from-orange-900/30 to-orange-800/20'">
          <div class="text-2xl font-bold text-orange-500">{{ dataOverview.coveredCountries }}</div>
          <div class="text-sm mt-1" :class="themeState.isLight ? 'text-gray-600' : 'text-gray-300'">{{ ts('覆盖国家/地区', '覆盖国家/地区') }}</div>
        </div>
        
        <!-- 覆盖语言数 -->
        <div class="text-center p-4 rounded-xl border border-red-500/30 shadow-md transition-colors duration-300 hover:border-red-500" 
             :class="themeState.isLight ? 'bg-red-50' : 'bg-gradient-to-br from-red-900/30 to-red-800/20'">
          <div class="text-2xl font-bold text-red-500">{{ dataOverview.coveredLanguages }}</div>
          <div class="text-sm mt-1" :class="themeState.isLight ? 'text-gray-600' : 'text-gray-300'">{{ ts('覆盖语言', '覆盖语言') }}</div>
        </div>
        
        <!-- 税务政策数量 -->
        <div class="text-center p-4 rounded-xl border border-cyan-500/30 shadow-md transition-colors duration-300 hover:border-cyan-500" 
             :class="themeState.isLight ? 'bg-cyan-50' : 'bg-gradient-to-br from-cyan-900/30 to-cyan-800/20'">
          <div class="text-2xl font-bold text-cyan-500">{{ dataOverview.taxPolicies }}</div>
          <div class="text-sm mt-1" :class="themeState.isLight ? 'text-gray-600' : 'text-gray-300'">{{ ts('税务政策', '税务政策') }}</div>
        </div>
      </div>
      
      <!-- 图表部分 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- 产业类型饼图 -->
        <div class="bg-white/5 rounded-xl p-4 shadow-md border border-gray-700/20">
          <h3 class="text-lg font-medium mb-4 flex items-center" :class="themeState.isLight ? 'text-gray-900' : 'text-white'">
        <PieChart class="w-4 h-4 mr-2" style="color: #60a5fa;" />
        {{ ts('产业类型分布', '产业类型分布') }}
          </h3>
          <div class="h-64 flex items-center justify-center">
        <div class="relative w-40 h-40">
          <!-- 使用SVG绘制正确比例的饼图 -->
          <svg class="w-40 h-40 transform -rotate-90" viewBox="0 0 100 100">
            <!-- 制造业 42% -->
            <circle 
          cx="50" cy="50" r="40" 
          fill="transparent" 
          stroke="#60a5fa" 
          stroke-width="8" 
          stroke-dasharray="105.6 158.4"
          stroke-dashoffset="0"
          class="drop-shadow-lg"
            />
            <!-- 科技 28% -->
            <circle 
          cx="50" cy="50" r="40" 
          fill="transparent" 
          stroke="#a855f7" 
          stroke-width="8" 
          stroke-dasharray="70.4 193.6"
          stroke-dashoffset="-105.6"
          class="drop-shadow-lg"
            />
            <!-- 农业 18% -->
            <circle 
          cx="50" cy="50" r="40" 
          fill="transparent" 
          stroke="#10b981" 
          stroke-width="8" 
          stroke-dasharray="45.2 218.8"
          stroke-dashoffset="-176"
          class="drop-shadow-lg"
            />
            <!-- 其他 12% -->
            <circle 
          cx="50" cy="50" r="40" 
          fill="transparent" 
          stroke="#f59e0b" 
          stroke-width="8" 
          stroke-dasharray="30.2 233.8"
          stroke-dashoffset="-221.2"
          class="drop-shadow-lg"
            />
          </svg>
          
          <!-- 中心区域 -->
          <div class="absolute inset-0 flex items-center justify-center">
            <div class="w-20 h-20 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center">
          <span class="text-xs font-bold text-white">政策分布</span>
            </div>
          </div>
        </div>
        <div class="ml-8 space-y-2">
          <div class="flex items-center">
            <div class="w-3 h-3 bg-electric-500 rounded-full mr-2 shadow-sm"></div>
            <span class="text-sm">制造业 42%</span>
          </div>
          <div class="flex items-center">
            <div class="w-3 h-3 bg-purple-500 rounded-full mr-2 shadow-sm"></div>
            <span class="text-sm">科技 28%</span>
          </div>
          <div class="flex items-center">
            <div class="w-3 h-3 bg-green-500 rounded-full mr-2 shadow-sm"></div>
            <span class="text-sm">农业 18%</span>
          </div>
          <div class="flex items-center">
            <div class="w-3 h-3 bg-orange-500 rounded-full mr-2 shadow-sm"></div>
            <span class="text-sm">其他 12%</span>
          </div>
        </div>
          </div>
        </div>
        
        <!-- 每日新增折线图 -->
        <div class="bg-white/5 rounded-xl p-4 shadow-md border border-gray-700/20">
          <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-medium flex items-center" :class="themeState.isLight ? 'text-gray-900' : 'text-white'">
              <LineChart class="w-4 h-4 mr-2 text-electric-500" />
              {{ ts('每日新增趋势', '每日新增趋势') }}
            </h3>
            <div class="text-xs px-2 py-1 bg-electric-500/20 text-electric-500 rounded">
              {{ ts('近7天', '近7天') }}
            </div>
          </div>
          <div class="h-48 relative">
            <!-- 图表容器 -->
            <div class="absolute inset-0 flex flex-col">
              <!-- Y轴和图表区域 -->
              <div class="flex-1 flex">
          <!-- Y轴标签 -->
          <div class="w-8 flex flex-col justify-between text-xs text-gray-500 pr-2">
            <span>100</span>
            <span>75</span>
            <span>50</span>
            <span>25</span>
            <span>0</span>
          </div>
          
          <!-- 图表区域 -->
          <div class="flex-1 relative border-l border-b border-gray-600 rounded-br">
            <!-- 网格线 -->
            <div class="absolute inset-0">
              <div class="absolute top-0 left-0 right-0 border-t border-gray-700"></div>
              <div class="absolute top-1/4 left-0 right-0 border-t border-gray-700"></div>
              <div class="absolute top-1/2 left-0 right-0 border-t border-gray-700"></div>
              <div class="absolute top-3/4 left-0 right-0 border-t border-gray-700"></div>
            </div>
            
            <!-- SVG折线图 -->
            <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
              <defs>
                <linearGradient id="line-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:#60a5fa;stop-opacity:1" />
            <stop offset="100%" style="stop-color:#34d399;stop-opacity:1" />
                </linearGradient>
                <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
            <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur" />
            <feBlend in="SourceGraphic" in2="blur" mode="screen" />
                </filter>
              </defs>
              <!-- 折线 -->
              <path 
                d="M8,75 L24,60 L40,30 L56,50 L72,25 L88,15" 
                fill="none" 
                stroke="url(#line-gradient)" 
                stroke-width="3" 
                stroke-linecap="round"
                stroke-linejoin="round"
                filter="url(#glow)"
              />
              <!-- 数据点 -->
              <circle cx="8" cy="75" r="3" fill="#60a5fa" stroke="white" stroke-width="1" class="data-point" />
              <circle cx="24" cy="60" r="3" fill="#60a5fa" stroke="white" stroke-width="1" class="data-point" />
              <circle cx="40" cy="30" r="3" fill="#60a5fa" stroke="white" stroke-width="1" class="data-point" />
              <circle cx="56" cy="50" r="3" fill="#60a5fa" stroke="white" stroke-width="1" class="data-point" />
              <circle cx="72" cy="25" r="3" fill="#60a5fa" stroke="white" stroke-width="1" class="data-point" />
              <circle cx="88" cy="15" r="3" fill="#34d399" stroke="white" stroke-width="1" class="data-point" />
            </svg>
          </div>
              </div>
              
              <!-- X轴标签 -->
              <div class="h-6 flex">
          <div class="w-8"></div> <!-- 占位，对应Y轴标签区域 -->
          <div class="flex-1 flex justify-between items-center px-2 text-xs text-gray-500">
            <span>周一</span>
            <span>周二</span>
            <span>周三</span>
            <span>周四</span>
            <span>周五</span>
            <span>周六</span>
            <span>周日</span>
          </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 各地区政策数量柱状图 -->
        <div class="bg-white/5 rounded-xl p-4 shadow-md border border-gray-700/20">
          <h3 class="text-lg font-medium mb-4 flex items-center" :class="themeState.isLight ? 'text-gray-900' : 'text-white'">
            <MapPin class="w-4 h-4 mr-2 text-electric-500" />
            {{ ts('各地区政策数量', '各地区政策数量') }}
          </h3>
          <div class="h-64 flex items-center justify-center">
            <div class="w-full">
              <div class="flex items-end justify-between h-40 px-4 border-b border-l border-gray-600 rounded-bl">
                <div class="flex flex-col items-center w-1/5 transform transition-transform duration-300 hover:scale-105">
                  <div class="h-32 bg-gradient-to-t from-blue-500 to-blue-500/20 w-4 rounded-t shadow-md"></div>
                  <span class="text-xs mt-1">北美</span>
                  <span class="text-xs text-blue-400 mt-1 font-bold">32,456</span>
                </div>
                <div class="flex flex-col items-center w-1/5 transform transition-transform duration-300 hover:scale-105">
                  <div class="h-40 bg-gradient-to-t from-green-500 to-green-500/20 w-4 rounded-t shadow-md"></div>
                  <span class="text-xs mt-1">欧洲</span>
                  <span class="text-xs text-green-400 mt-1 font-bold">42,189</span>
                </div>
                <div class="flex flex-col items-center w-1/5 transform transition-transform duration-300 hover:scale-105">
                  <div class="h-28 bg-gradient-to-t from-purple-500 to-purple-500/20 w-4 rounded-t shadow-md"></div>
                  <span class="text-xs mt-1">亚洲</span>
                  <span class="text-xs text-purple-400 mt-1 font-bold">28,745</span>
                </div>
                <div class="flex flex-col items-center w-1/5 transform transition-transform duration-300 hover:scale-105">
                  <div class="h-20 bg-gradient-to-t from-orange-500 to-orange-500/20 w-4 rounded-t shadow-md"></div>
                  <span class="text-xs mt-1">南美</span>
                  <span class="text-xs text-orange-400 mt-1 font-bold">12,345</span>
                </div>
                <div class="flex flex-col items-center w-1/5 transform transition-transform duration-300 hover:scale-105">
                  <div class="h-24 bg-gradient-to-t from-red-500 to-red-500/20 w-4 rounded-t shadow-md"></div>
                  <span class="text-xs mt-1">非洲</span>
                  <span class="text-xs text-red-400 mt-1 font-bold">8,976</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

      <!-- 四大功能板块 -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- 1. 智能问答板块 -->
        <div class="glass-card p-8 hover:cyber-glow transition-all duration-300 cursor-pointer group" @click="navigateToPage('AIChat')">
          <div class="text-center space-y-4">
            <div class="relative mx-auto w-20 h-20 mb-6">
              <div class="absolute inset-0 bg-gradient-to-br from-electric-500/20 to-tech-blue-500/20 rounded-full animate-pulse"></div>
              <div class="relative w-full h-full bg-gradient-to-br from-electric-500 to-tech-blue-500 rounded-full flex items-center justify-center">
                <Bot class="w-10 h-10 text-white" />
              </div>
              <div class="absolute -top-2 -right-2 w-6 h-6 bg-green-400 rounded-full flex items-center justify-center animate-bounce">
                <Sparkles class="w-3 h-3 text-white" />
              </div>
            </div>
            
            <h3 class="text-2xl font-bold group-hover:text-electric-500 transition-colors" :class="themeState.isLight ? 'text-gray-900' : 'text-white'">
              {{ ts('AI智能问答', 'AI智能问答') }}
            </h3>
            <p :class="themeState.isLight ? 'text-gray-600' : 'text-white/70'">
              {{ ts('基于大模型的政策智能解答系统，24小时在线为您答疑解惑', '基于大模型的政策智能解答系统，24小时在线为您答疑解惑') }}
            </p>
            
            <div class="flex items-center justify-center space-x-4 text-sm">
              <div class="flex items-center space-x-1">
                <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                <span class="text-green-400">{{ ts('在线服务', '在线服务') }}</span>
              </div>
              <div class="text-electric-500">
                <span class="font-bold">{{ todayQuestions }}</span> {{ ts('今日咨询', '今日咨询') }}
              </div>
            </div>
            
            <div class="pt-4">
              <button class="px-6 py-3 bg-electric-500/20 text-electric-500 rounded-lg hover:bg-electric-500 hover:text-white transition-all group-hover:scale-105">
                {{ ts('立即咨询', '立即咨询') }}
              </button>
            </div>
          </div>
        </div>

        <!-- 2. 政策中心板块 -->
        <div class="glass-card p-8 hover:cyber-glow transition-all duration-300 cursor-pointer group" @click="navigateToPage('PolicyCenter')">
          <div class="text-center space-y-4">
            <div class="relative mx-auto w-20 h-20 mb-6">
              <div class="absolute inset-0 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-full animate-pulse"></div>
              <div class="relative w-full h-full bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center">
                <FileText class="w-10 h-10 text-white" />
              </div>
              <div class="absolute -top-2 -right-2 w-6 h-6 bg-orange-400 rounded-full flex items-center justify-center animate-bounce">
                <TrendingUp class="w-3 h-3 text-white" />
              </div>
            </div>
            
            <h3 class="text-2xl font-bold group-hover:text-purple-500 transition-colors" :class="themeState.isLight ? 'text-gray-900' : 'text-white'">
              {{ ts('政策中心', '政策中心') }}
            </h3>
            <p :class="themeState.isLight ? 'text-gray-600' : 'text-white/70'">
              {{ ts('政策分析、查询、对比、推演一站式服务平台', '政策分析、查询、对比、推演一站式服务平台') }}
            </p>
            
            <div class="grid grid-cols-2 gap-4 text-sm">
              <div class="flex items-center space-x-1">
                <Target class="w-4 h-4 text-purple-500" />
                <span :class="themeState.isLight ? 'text-gray-600' : 'text-white/70'">{{ ts('智能分析', '智能分析') }}</span>
              </div>
              <div class="flex items-center space-x-1">
                <Search class="w-4 h-4 text-purple-500" />
                <span :class="themeState.isLight ? 'text-gray-600' : 'text-white/70'">{{ ts('政策查询', '政策查询') }}</span>
              </div>
              <div class="flex items-center space-x-1">
                <BarChart3 class="w-4 h-4 text-purple-500" />
                <span :class="themeState.isLight ? 'text-gray-600' : 'text-white/70'">{{ ts('对比分析', '对比分析') }}</span>
              </div>
              <div class="flex items-center space-x-1">
                <Brain class="w-4 h-4 text-purple-500" />
                <span :class="themeState.isLight ? 'text-gray-600' : 'text-white/70'">{{ ts('政策推演', '政策推演') }}</span>
              </div>
            </div>
            
            <div class="flex items-center justify-center space-x-4 text-sm">
              <div class="text-purple-500">
                <span class="font-bold">{{ totalPolicies }}</span> {{ ts('政策总数', '政策总数') }}
              </div>
              <div class="text-purple-500">
                <span class="font-bold">{{ todayUpdates }}</span> {{ ts('今日更新', '今日更新') }}
              </div>
            </div>
            
            <div class="pt-4">
              <button class="px-6 py-3 bg-purple-500/20 text-purple-500 rounded-lg hover:bg-purple-500 hover:text-white transition-all group-hover:scale-105">
                {{ ts('进入政策中心', '进入政策中心') }}
              </button>
            </div>
          </div>
        </div>

        <!-- 3. 跨境分析板块 -->
        <div class="glass-card p-8 hover:cyber-glow transition-all duration-300 cursor-pointer group" @click="navigateToPage('CrossBorderAnalysis')">
          <div class="text-center space-y-4">
            <div class="relative mx-auto w-20 h-20 mb-6">
              <div class="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 rounded-full animate-pulse"></div>
              <div class="relative w-full h-full bg-gradient-to-br from-blue-500 to-cyan-500 rounded-full flex items-center justify-center">
                <Globe class="w-10 h-10 text-white" />
              </div>
              <div class="absolute -top-2 -right-2 w-6 h-6 bg-cyan-400 rounded-full flex items-center justify-center animate-bounce">
                <Ship class="w-3 h-3 text-white" />
              </div>
            </div>
            
            <h3 class="text-2xl font-bold group-hover:text-blue-500 transition-colors" :class="themeState.isLight ? 'text-gray-900' : 'text-white'">
              {{ ts('跨境分析', '跨境分析') }}
            </h3>
            <p :class="themeState.isLight ? 'text-gray-600' : 'text-white/70'">
              {{ ts('全球贸易地图与AI智慧跨境政策分析', '全球贸易地图与AI智慧跨境政策分析') }}
            </p>
            
            <div class="grid grid-cols-2 gap-4 text-sm">
              <div class="flex items-center space-x-1">
                <MapPin class="w-4 h-4 text-blue-500" />
                <span :class="themeState.isLight ? 'text-gray-600' : 'text-white/70'">{{ ts('全球地图', '全球地图') }}</span>
              </div>
              <div class="flex items-center space-x-1">
                <Zap class="w-4 h-4 text-blue-500" />
                <span :class="themeState.isLight ? 'text-gray-600' : 'text-white/70'">{{ ts('智慧分析', '智慧分析') }}</span>
              </div>
              <div class="flex items-center space-x-1">
                <TrendingUp class="w-4 h-4 text-blue-500" />
                <span :class="themeState.isLight ? 'text-gray-600' : 'text-white/70'">{{ ts('趋势预测', '趋势预测') }}</span>
              </div>
              <div class="flex items-center space-x-1">
                <Award class="w-4 h-4 text-blue-500" />
                <span :class="themeState.isLight ? 'text-gray-600' : 'text-white/70'">{{ ts('智慧方案', '智慧方案') }}</span>
              </div>
            </div>
            
            <div class="flex items-center justify-center space-x-4 text-sm">
              <div class="text-blue-500">
                <span class="font-bold">{{ coverageCountries }}</span> {{ ts('覆盖国家', '覆盖国家') }}
              </div>
              <div class="text-blue-500">
                <span class="font-bold">{{ activeTradeRoutes }}</span> {{ ts('贸易路线', '贸易路线') }}
              </div>
            </div>
            
            <div class="pt-4">
              <button class="px-6 py-3 bg-blue-500/20 text-blue-500 rounded-lg hover:bg-blue-500 hover:text-white transition-all group-hover:scale-105">
                {{ ts('开始分析', '开始分析') }}
              </button>
            </div>
          </div>
        </div>

        <!-- 4. 个人中心板块 -->
        <div class="glass-card p-8 hover:cyber-glow transition-all duration-300 cursor-pointer group" @click="navigateToPage('UserCenter')">
          <div class="text-center space-y-4">
            <div class="relative mx-auto w-20 h-20 mb-6">
              <div class="absolute inset-0 bg-gradient-to-br from-green-500/20 to-emerald-500/20 rounded-full animate-pulse"></div>
              <div class="relative w-full h-full bg-gradient-to-br from-green-500 to-emerald-500 rounded-full flex items-center justify-center">
                <User class="w-10 h-10 text-white" />
              </div>
              <div class="absolute -top-2 -right-2 w-6 h-6 bg-yellow-400 rounded-full flex items-center justify-center animate-bounce">
                <Settings class="w-3 h-3 text-white" />
              </div>
            </div>
            
            <h3 class="text-2xl font-bold group-hover:text-green-500 transition-colors" :class="themeState.isLight ? 'text-gray-900' : 'text-white'">
              {{ ts('个人中心', '个人中心') }}
            </h3>
            <p :class="themeState.isLight ? 'text-gray-600' : 'text-white/70'">
              {{ ts('个性化设置、历史记录、偏好配置管理', '个性化设置、历史记录、偏好配置管理') }}
            </p>
            
            <div class="grid grid-cols-2 gap-4 text-sm">
              <div class="flex items-center space-x-1">
                <Briefcase class="w-4 h-4 text-green-500" />
                <span :class="themeState.isLight ? 'text-gray-600' : 'text-white/70'">{{ ts('企业档案', '企业档案') }}</span>
              </div>
              <div class="flex items-center space-x-1">
                <Clock class="w-4 h-4 text-green-500" />
                <span :class="themeState.isLight ? 'text-gray-600' : 'text-white/70'">{{ ts('历史记录', '历史记录') }}</span>
              </div>
              <div class="flex items-center space-x-1">
                <Star class="w-4 h-4 text-green-500" />
                <span :class="themeState.isLight ? 'text-gray-600' : 'text-white/70'">{{ ts('收藏夹', '收藏夹') }}</span>
              </div>
              <div class="flex items-center space-x-1">
                <Settings class="w-4 h-4 text-green-500" />
                <span :class="themeState.isLight ? 'text-gray-600' : 'text-white/70'">{{ ts('偏好设置', '偏好设置') }}</span>
              </div>
            </div>
            
            <div class="flex items-center justify-center space-x-4 text-sm">
              <div class="text-green-500">
                <span class="font-bold">{{ savedPolicies }}</span> {{ ts('收藏政策', '收藏政策') }}
              </div>
              <div class="text-green-500">
                <span class="font-bold">{{ profileComplete }}</span>% {{ ts('资料完成度', '资料完成度') }}
              </div>
            </div>
            
            <div class="pt-4">
              <button class="px-6 py-3 bg-green-500/20 text-green-500 rounded-lg hover:bg-green-500 hover:text-white transition-all group-hover:scale-105">
                {{ ts('进入中心', '进入中心') }}
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 智能Agent状态栏 -->
      <div class="glass-card p-6 mt-8">
        <div class="flex items-center justify-between mb-4">
          <div>
            <h3 class="text-xl font-semibold flex items-center" :class="themeState.isLight ? 'text-gray-900' : 'text-white'">
              <Bot class="w-5 h-5 mr-2 text-electric-500" />
              {{ ts('智能Agent代理系统', '智能Agent代理系统') }}
            </h3>
            <p class="text-sm mt-1" :class="themeState.isLight ? 'text-gray-600' : 'text-gray-400'">
              {{ ts('为您提供7×24小时智能政策监控与分析服务', '为您提供7×24小时智能政策监控与分析服务') }}
            </p>
          </div>
          <div class="flex items-center space-x-2">
            <div class="text-xs px-2 py-1 bg-electric-500/20 text-electric-500 rounded animate-pulse">
              {{ ts('实时运行', '实时运行') }}
            </div>
            <div class="text-xs px-2 py-1 bg-green-500/20 text-green-400 rounded">
              {{ ts('智能推荐', '智能推荐') }}
            </div>
          </div>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
          <div class="rounded-lg p-4 text-center" :class="themeState.isLight ? 'bg-gray-100' : 'bg-white/5'">
            <div class="text-2xl font-bold text-electric-500 mb-1">{{ agentStats.totalPush }}</div>
            <div class="text-sm" :class="themeState.isLight ? 'text-gray-600' : 'text-white/70'">{{ ts('今日推送', '今日推送') }}</div>
          </div>
          <div class="rounded-lg p-4 text-center" :class="themeState.isLight ? 'bg-gray-100' : 'bg-white/5'">
            <div class="text-2xl font-bold text-orange-400 mb-1">{{ agentStats.highPriority }}</div>
            <div class="text-sm" :class="themeState.isLight ? 'text-gray-600' : 'text-white/70'">{{ ts('高优先级', '高优先级') }}</div>
          </div>
          <div class="rounded-lg p-4 text-center" :class="themeState.isLight ? 'bg-gray-100' : 'bg-white/5'">
            <div class="text-2xl font-bold text-green-400 mb-1">{{ agentStats.announced }}</div>
            <div class="text-sm" :class="themeState.isLight ? 'text-gray-600' : 'text-white/70'">{{ ts('已播报', '已播报') }}</div>
          </div>
          <div class="rounded-lg p-4 text-center" :class="themeState.isLight ? 'bg-gray-100' : 'bg-white/5'">
            <div class="text-2xl font-bold text-purple-400 mb-1">{{ agentStats.matchScore }}%</div>
            <div class="text-sm" :class="themeState.isLight ? 'text-gray-600' : 'text-white/70'">{{ ts('匹配度', '匹配度') }}</div>
          </div>
          <div class="rounded-lg p-4 text-center" :class="themeState.isLight ? 'bg-gray-100' : 'bg-white/5'">
            <div class="text-2xl font-bold text-blue-400 mb-1">{{ agentStats.processingTime }}</div>
            <div class="text-sm" :class="themeState.isLight ? 'text-gray-600' : 'text-white/70'">{{ ts('处理时间', '处理时间') }}</div>
          </div>
          <div class="rounded-lg p-4 text-center" :class="themeState.isLight ? 'bg-gray-100' : 'bg-white/5'">
            <div class="text-2xl font-bold text-cyan-400 mb-1">{{ agentStats.accuracy }}</div>
            <div class="text-sm" :class="themeState.isLight ? 'text-gray-600' : 'text-white/70'">{{ ts('准确率', '准确率') }}</div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { inject, computed } from 'vue'
import { useTranslation } from '../composables/useTranslation.js'
import { currentUser, userService, USER_TYPES } from '../services/userService.js'
import { themeState } from '../services/themeService.js'
import UserTypeSwitcher from '../components/UserTypeSwitcher.vue'

import { 
  Globe, 
  Bot, 
  FileText, 
  User, 
  Bell,
  ChevronDown,
  Sparkles,
  Target,
  Search,
  BarChart3,
  Brain,
  MapPin,
  Zap,
  TrendingUp,
  Award,
  Ship,
  Briefcase,
  Clock,
  Star,
  Settings,
  AlertTriangle
} from 'lucide-vue-next'

// 场景专用Dashboard组件
import BrazilManagerDashboard from './BrazilManagerDashboard.vue'
import OxfordPhDDashboard from './OxfordPhDDashboard.vue'
import EcommerceParkDashboard from './EcommerceParkDashboard.vue'
import MiningCompanyDashboard from './MiningCompanyDashboard.vue'
import dataOverview from '@/assets/dataOverview.json';
import axios from 'axios'

export default {
  name: 'Dashboard',
  components: {
    UserTypeSwitcher,
    BrazilManagerDashboard,
    OxfordPhDDashboard,
    EcommerceParkDashboard,
    MiningCompanyDashboard,
    Globe,
    Bot,
    FileText,
    User,
    Bell,
    ChevronDown,
    Sparkles,
    Target,
    Search,
    BarChart3,
    Brain,
    MapPin,
    Zap,
    TrendingUp,
    Award,
    Ship,
    Briefcase,
    Clock,
    Star,
    Settings,
    AlertTriangle,
  } ,

  setup() {
    // 使用翻译系统
    const { ts } = useTranslation()

    return {
      ts,
      themeState,
      currentUser,
      USER_TYPES
    }
  },

  data() {
    return {
      showUserSwitcher: false,
      showNotificationDetails: false,
      
      // 实时通知数据
      recentNotifications: [
        {
          id: 1,
          title: '美国对华关税政策调整',
          time: '2分钟前',
          icon: 'AlertTriangle',
          priority: 'high',
          description: '美国贸易代表办公室宣布对中国电动汽车征收新关税，税率从25%提高至100%'
        },
        {
          id: 2,
          title: 'RCEP最新实施细则发布',
          time: '15分钟前',
          icon: 'FileText',
          priority: 'medium',
          description: 'RCEP协议新增数字贸易条款，为跨境电商提供更多便利'
        },
        {
          id: 3,
          title: '欧盟碳边境调节机制更新',
          time: '1小时前',
          icon: 'Globe',
          priority: 'medium',
          description: 'CBAM实施范围扩大至更多行业，将影响中国对欧出口'
        },
        {
          id: 4,
          title: '中国105个跨境电商试验区政策优化',
          time: '3小时前',
          icon: 'Ship',
          priority: 'low',
          description: '进一步完善跨境电商零售进口监管政策，提升通关效率'
        },
        {
          id: 5,
          title: '一带一路沿线国家新签署贸易协定',
          time: '6小时前',
          icon: 'Globe',
          priority: 'medium',
          description: '与巴基斯坦签署数字经济合作协议，开启新的合作领域'
        }
      ],
      
      // 统计数据
      todayQuestions: 1247,
      totalPolicies: '156,847',
      todayUpdates: 89,
      coverageCountries: 195,
      activeTradeRoutes: 2847,
      savedPolicies: 23,
      profileComplete: 85,
      
      // 详细统计数据
      detailedStats: {
        globalPolicies: 156847,
        activePolicies: 89234,
        draftPolicies: 45632,
        expiredPolicies: 21981,
        countriesCovered: 195,
        industriesCovered: 2847,
        companiesServed: 125000,
        aiAccuracy: 98.5,
        tradeFacilitation: 2891,
        taxIncentives: 1456,
        investmentIncentives: 892,
        policySimulations: 12547
      },
      
              // Agent统计
        agentStats: {
          totalPush: 28,
          highPriority: 5,
          announced: 23,
          matchScore: 94,
          processingTime: '1.2秒',
          accuracy: '98.5%',
          monitoredPolicies: 156847,
          activeAlerts: 12
        },

        // === 新增：数据总览数据 ===
      dataOverview: {
        totalPolicies: '0',
        todayUpdates: 0,
        crossBorderPolicies: '0',
        coveredCountries: 0,
        coveredLanguages: 0,
        taxPolicies: '0'
      },
      refreshInterval: null
    }
  },
  created() {
    this.fetchDataOverview();
    this.setupAutoRefresh();
  },
  beforeDestroy() {
    this.clearAutoRefresh(); // 组件销毁前清除定时器
  },

  methods: {
    fetchDataOverview() {
      axios.get('http://localhost:8000/api/policy/summary-stats')  // 你的后端API端点
        .then(response => {
          // 假设后端返回的数据结构与我们需要的一致
          console.log('获取数据概览成功:', response.data);
          this.dataOverview.totalPolicies= response.data.data.policy_total_count || dataOverview.totalPolicies;
          this.dataOverview.todayUpdates = response.data.data.today_update_count || dataOverview.todayUpdates;
          this.dataOverview.crossBorderPolicies = response.data.data.cross_border_policy_count || dataOverview.crossBorderPolicies;
          this.dataOverview.coveredCountries = response.data.data.covered_countries || dataOverview.coveredCountries;
          this.dataOverview.coveredLanguages = response.data.data.total_language_count || dataOverview.coveredLanguages;
          this.dataOverview.taxPolicies = response.data.data.tax_policy_count || dataOverview.taxPolicies;
        })
        .catch(error => {
          console.error('获取数据概览失败:', error);
          this.dataOverview = dataOverview; // 使用本地数据模拟
          // 可以在这里设置一些默认值或显示错误信息
        });
       //this.dataOverview = dataOverview; // 使用本地数据模拟 
    },
    setupAutoRefresh() {
      //5分钟
      this.refreshInterval = setInterval(() => {
        this.fetchDataOverview();
      }, 300000);
    },
    
    clearAutoRefresh() {
      if (this.refreshInterval) {
        clearInterval(this.refreshInterval);
        this.refreshInterval = null;
      }
    },
    // 获取Dashboard标题
    getDashboardTitle() {
      const userConfig = this.getUserTypeConfig()
      return userConfig ? `${userConfig.name} - 政策管理中心` : '政策管理中心'
    },

    // 获取Dashboard副标题
    getDashboardSubtitle() {
      if (currentUser.isLoggedIn) {
        return `欢迎回来，${currentUser.name}！为您提供专业的政策咨询服务`
      }
      return '您的专业政策咨询助手'
    },

    // 获取用户类型配置
    getUserTypeConfig() {
      return userService.getUserTypeConfig(currentUser.type)
    },

    // 获取用户图标
    getUserIcon() {
      const config = this.getUserTypeConfig()
      return config ? config.icon : 'User'
    },

    // 页面导航
    navigateToPage(page) {
      // 使用路由导航
      console.log(`导航到: ${page}`)
      
      switch(page) {
        case 'AIChat':
          this.$router.push('/ai-chat')
          break
        case 'PolicyCenter':
          this.$router.push('/policy-center')
          break
        case 'CrossBorderAnalysis':
          this.$router.push('/cross-border-analysis')
          break
        case 'UserCenter':
          this.$router.push('/user-center')
          break
      }
    }
  }
}
</script>

<style scoped>
.animate-glow {
  animation: glow 2s ease-in-out infinite alternate;
}

/* 图表优化样式 */
.glass-card {
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

/* 数据点动画 */
.data-point {
  transition: transform 0.2s ease-out, filter 0.2s ease-out; /* 平滑过渡 */
  cursor: pointer;
}

.data-point:hover {
  transform: scale(1); 
  filter: drop-shadow(0 0 4px rgba(96, 165, 250, 0.5)); /* 发光效果优化 */
}

/* 图表区域优化 */
.bg-white\/5 {
  background: rgba(255, 255, 255, 0.03);
}

/* 折线图区域 */
.rounded-bl {
  border-bottom-left-radius: 0.5rem;
}

/* 柱状图柱子动画 */
.transform {
  transition: transform 0.3s ease;
}

/* 卡片阴影优化 */
.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 图表标题图标样式 */
.text-lg svg {
  margin-right: 0.5rem;
}

/* 折线图路径发光效果 */
path[stroke^="url"] {
  filter: drop-shadow(0 0 2px rgba(96, 165, 250, 0.5));
}

/* 柱状图渐变效果 */
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

/* 数据卡片悬停效果 */
.hover\:scale-105:hover {
  transform: scale(1.05);
}

/* 饼图边框优化 */
.rounded-full {
  border-radius: 50%;
}

@keyframes glow {
  from {
    text-shadow: 0 0 10px rgba(96, 165, 250, 0.5);
  }
  to {
    text-shadow: 0 0 20px rgba(96, 165, 250, 0.8);
  }
}

.cyber-glow {
  box-shadow: 0 0 20px rgba(96, 165, 250, 0.3);
  transform: translateY(-2px);
}
</style> 